<template>
  <view class="home">
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item v-for="(item,index) in swiperList" :key="item.goods_id">
        <navigator :url="item.navigator_url">
          <image :src="item.image_src" mode=""></image>
        </navigator>
      </swiper-item>
    </swiper>
    <!-- 分类导航 -->
    <view class="nav">
      <view class="item" @click="goCate(item.name)" v-for="(item,index) in cateList" :key="index">
        <image :src="item.image_src" mode=""></image>
      </view>
    </view>
    <!-- 楼层 -->
    <view class="floor">
      <!-- 每个楼层 -->
      <view class="item" v-for="(item,index) in floorList" :key="index">
        <!-- 标题 -->
        <view class="title">
          <image :src="item.floor_title.image_src" mode="widthFix"></image>
        </view>

        <view class="list">
          <!-- 左边 -->
        <view class="left" >
            <image  @click="goGoodsList(item.floor_title.name)"  :src="item.product_list[0].image_src" :style="{width:item.product_list[0].image_width+'rpx'}" mode="widthFix"></image>
          </view>
          <!-- 右边 -->
          <view class="right">
            <image  @click="goGoodsList(i.name)"  v-if="j!==0" v-for="(i,j) in item.product_list" :key="j" :src="i.image_src" mode="widthFix" :style="{width:i.image_width+'rpx'}"></image>
          </view>
        </view>
      </view>
    </view>
  </view>

</template>

<script>
import mymixins from '../../mixins/mymixins.js'
  export default {
    mixins:[mymixins],
    data() {
      return {
        swiperList: [],
        cateList: [],
        floorList: []
      };
    },
    onLoad() {
      this.getSwiperList()
      this.getCateList()
      this.getFloorList()
    },
    methods: {
      // 跳转到商品列表
      goGoodsList(key) {
        uni.navigateTo({
          url: `/pages/list/list?key=${key}`
        })
      },
      // 获取楼层
      async getFloorList() {
        const {
          data: {
            message,
            meta: {
              status,
              msg
            }
          }
        } = await uni.$http.get('/home/floordata')
        if (status !== 200) return uni.$showMsg(msg)
        this.floorList = message
      },
      // 跳转去分类导航
      goCate(name) {
        if (name !== '分类') return
        uni.switchTab({
          url: '/pages/cate/cate'
        })
      },
      // 获取分类导航
      async getCateList() {
        const {
          data: {
            message,
            meta: {
              status,
              msg
            }
          }
        } = await uni.$http.get('/home/catitems')
        if (status !== 200) return uni.$showMsg(msg)
        this.cateList = message

      },
      // 获取轮播图
      async getSwiperList() {
        const {
          data: {
            message,
            meta
          }
        } = await uni.$http.get('/home/swiperdata')

        if (meta.status !== 200) return uni.$showMsg()
        this.swiperList = message

      }
    }
  }
</script>

<style lang="scss">
  .search {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 999;
  }

  .home {
    swiper {
      height: 360rpx;

      image {
        width: 100%;
        height: 360rpx;
      }
    }

    .nav {
      display: flex;
      margin: 40rpx 0;
   
   //  justify-content: center;
      // align-items: center;
      .item {
        display: flex;
        flex: 1;
        justify-content: space-around;
        align-items: center;

        image {
          width: 140rpx;
          height: 140rpx;

        }
      }
    }

    .floor {
      .item {
        .title {
          image {
            width: 100%;
          }
        }
        .list {
                display: flex;
                margin: 16rpx;
                .left {}
                .right {
                  display: flex;
                  flex-wrap: wrap;
                  image {
                    margin-left: 10rpx;
                  }
                }
              }
      }

    }
  }
</style>
